<template>
  <div>
    <el-button
      @click="clickBtn"
      plain
      style="position: absolute"
      type="single-number"
    >
      选择
    </el-button>
    <el-single-select
      :dataObj="tableData"
      :prop="singleSelectColumn"
      :total="total"
      @close="close"
      @confirm="confirm"
      :pageSizes="pageSizes"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @listenTochildEvent="handleNodeClick"
      @addInput="addInput"
      :dialogVisible.sync="dialogVisible"
    >
      <template slot="dialogTop">
        <div class="dialog-input">
          <span class="label">结算单编号：</span>
          <el-input
            v-model.trim="formData.invoiceCode"
            placeholder="请输入结算单编号"
            style="width: 260px"
          ></el-input>
        </div>
        <div class="dialog-input">
          <span class="label">合同编号：</span>
          <el-input
            v-model.trim="formData.invoiceName"
            placeholder="请输入合同编号"
            style="width: 260px"
          ></el-input>
        </div>
        <div class="dialog-input">
          <span class="label">填报单位：</span>
          <el-input
            v-model.trim="formData.reportInOrgName"
            placeholder="请输入填报单位"
            style="width: 260px"
          ></el-input>
        </div>
        <div class="dialog-input">
          <span class="label">供应商：</span>
          <el-input
            v-model.trim="formData.partyBName"
            placeholder="请输入供应商"
            style="width: 260px"
          ></el-input>
        </div>
      </template>
    </el-single-select>
  </div>
</template>
<script>
// import { listSettlementPage } from "../api";
export default {
  name: "chooseSettlement",
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      title: "选择结算单编号",
      formData: {
        settlementCode: "", //结算单编号
        settlementName: "", //结算单名称
        reportInOrgName: "", //填报单位
        partyBName: "" //供应商
      },
      singleSelectColumn: [
        { prop: "settlementCode", label: "结算单编号" },
        { prop: "settlementName", label: "结算单名称" },
        { prop: "reportInOrgName", label: "填报单位" },
        { prop: "contractCode", label: "合同编号" },
        { prop: "contractName", label: "合同名称" },
        { prop: "partyBName", label: "供应商" },
        { prop: "amount", label: "结算数量" },
        { prop: "settlementAmount", label: "结算金额" },
        { prop: "contractCount", label: "合同数量" },
        { prop: "amount", label: "含税金额" }
      ],
      total: 0,
      pageSizes: [10, 20, 50, 100, 200, 500]
    };
  },
  methods: {
    close() {
      this.dialogTableVisibletextarea = false;
    },
    confirm() {
      this.dialogTableVisibletextarea = false;
      // alert(JSON.stringify(this.TableData));
      this.$emit("inventoryConfirm", this.TableData);
    },
    handleNodeClick() {},
    addInput() {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    clickBtn() {
      if (this.reportInOrgId && this.reportInOrgId != "") {
        this.dialogTableVisibletextarea = true;
        this.listConSupPage();
      } else {
        // this.$message({
        //   message: ,
        //   type: "error",
        //   showClose: true,
        //   ccuiCustom: true
        // });
        this.$showErrorMessage("请先选择填报单位")
      }
    }
  },
  mounted(){
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-single-select
  .el-dialog__wrapper
  .el-dialog
  .el-dialog__body
  .el-dialog-box
  .dialog-top {
  justify-content: space-between;
}
/deep/ .el-table__body-wrapper {
  max-height: 230px !important;
}
/deep/.label {
  display: inline-block;
  width: 130px !important;
  text-align: right;
}
</style>
